<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>39.满幅背景，定宽内容</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script>
    /*
    难题：背景宽度满幅，内容宽度固定

    1. calc() 函数

      padding: 1em calc(50% - 350px); // 左右两边从中间各腾 350px出来，内容定宽 700px！
    
  */
  </script>

  <style>
    header, section, footer {
      padding: 1em; /* 回退 */
      padding: 1em calc(50% - 350px);
    }

    footer {
      background: #333;
      color: white;
    }

    header {
      background: orange;
      color: white;
    }

    section + section {
      background: #eee;
    }

    body {
      margin: 0;
      font: 100%/1.5 sans-serif;
    }
  </style>
</head>
<body>
  <header>
    <h1>Fluid background, <br />fixed content</h1>
  </header>
  <section>
    <h1>Heading</h1>
    <p>Bacon ipsum dolor amet voluptate et shoulder, ipsum flank tongue exercitation commodo sed beef ribs drumstick in
      venison laborum. Laboris ut enim id drumstick, et aute esse. Consequat ad kielbasa anim pork loin turkey qui
      cupidatat drumstick doner labore. Nulla sirloin jerky do sed magna meatloaf. Ribeye ea ut elit leberkas laboris
      sausage corned beef drumstick cillum non.</p>
  </section>
  <section>
    <h1>Another heading</h1>
    <p>Nostrud landjaeger cillum beef cow tail cupidatat non mollit voluptate jowl. Enim sunt in, flank hamburger
      proident qui. Id aute excepteur chuck magna tempor ipsum pork chop t-bone. Frankfurter meatball pork loin beef et
      leberkas pork. Pig ball tip pancetta in.</p>
    <p>Ribeye in veniam ipsum flank. Elit incididunt t-bone proident meatball. Porchetta exercitation prosciutto
      sausage chuck ut eu brisket shank pastrami turkey sunt laboris tenderloin anim. Landjaeger do venison laboris
      kevin.</p>
  </section>
  <footer>
    <p>&copy; 2015 Lea Verou (j/k, feel free to use wherever)</p>
    <p>Consectetur et t-bone pork loin. Tri-tip cupim in, spare ribs velit exercitation in. Tempor cillum fugiat, nisi
      leberkas reprehenderit anim laboris proident cow. Eu fatback kevin sint, ad shoulder in venison picanha. Sausage
      drumstick capicola, culpa boudin pork belly minim aute ipsum biltong picanha venison nulla adipisicing.</p>
  </footer>
</body>
</html>